<template>
	<view class="box" :style="theme">
		<view class="tabs">
			<u-tabs :list="tabList" lineHeight="1" :scrollable="false"
				:activeStyle="{ fontWeight: 'bolder', fontSize: '28rpx', color: '#222222' }"
				:inactiveStyle="{ fontSize: '28rpx' }" @click="tabclick" :current="active"></u-tabs>
		</view>
		<view class="aboutBallList">
			<view class="mt24" v-for="item in list" :key="item.id" @click="jump('/pages/aboutBall/detail?id=',item.id)">
				<view class="ballTop flex-cb registeredEndColor" v-if="item.status == 1 || item.status == 3">
					<view class="f30">{{ item.projectName }}约球</view>
					<view class="f28">{{ item.dateLimit }}</view>
				</view>
				<view class="ballTop flex-cb underwayColor" v-if="item.status == 2 || item.status == 4">
					<view class="f30">{{ item.projectName }}约球</view>
					<view class="f28">{{ item.dateLimit }}</view>
				</view>
				<view class="ballTop flex-cb finishedColor" v-if="item.status == 5 || item.status == 6">
					<view class="f30">{{ item.projectName }}约球</view>
					<view class="f28">{{ item.dateLimit }}</view>
				</view>
				<view class="ballBottom">
					<view class="flex-left">
						<image :src="imgHost+'/yueqiu_ic_time.png'"></image>
						<view class="f26 ml16 c3">{{item.beginTime}}-{{item.endTime }}</view>
					</view>
					<view class="flex-left mt30">
						<image :src="imgHost+'/yueqiu_ic_address.png'"></image>
						<view class="f26 ml16 c3">{{item.siteName}}</view>
					</view>
					<view class="flex-cb mt30">
						<view class="flex-left">
							<view class="c9 f24">{{ item.creatorName }}</view>
							<view class="longString"></view>
							<view class="c9 f24">限{{ item.numUp }}人</view>
						</view>
						<view class="registeredEnd" v-if="item.status==1">待支付</view>
						<view class="registered" v-if="item.status==2">{{ item.numJoin }}人已报名</view>
						<view class="registeredEnd" v-if="item.status==3">报名结束</view>
						<view class="underway" v-if="item.status==4">进行中</view>
						<view class="finished" v-if="item.status==5">已结束</view>
						<view class="finished" v-if="item.status==6">已取消</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无数据～</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						key: '2',
						name: '我发起的'
					},
					{
						key: '3',
						name: '我报名的'
					}
				],
				active: 0,
				list: [],
				page: 1,
				end: false,
				firstQueryTime: '',
				status: 'nomore',
			};
		},
		onLoad(options) {
			this.active = options.active || 0
			this.firstQueryTime = this.$app.firstQueryTime()
			this.list = [];
			this.page = 1;
			this.end = false;
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			tabclick(e) {
				this.active = e.index;
				this.firstQueryTime = this.$app.firstQueryTime()
				this.list = [];
				this.page = 1;
				this.end = false;
				this.getList()
			},
			// 列表
			getList() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							flag: this.tabList[this.active].key
						}
					},
					api: this.$api.listMeet()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabs {
		background: #fff;
	}
	.box {
		padding-bottom: 50rpx;
	}

	.box_config {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
	}

	.box_tabls {
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		padding: 30rpx;
		background: #ffffff;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		overflow: hidden;
	}

	.box_tabls_right {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		background: $bjColor;
	}

	.box_tabls_left {
		display: flex;
		overflow: hidden;
		flex-wrap: wrap;
	}

	.box_tabls_left_item {
		padding: 18rpx 46rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #111111;
		background: $bjColor;
		border-radius: 30rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}

	/* 约球列表 */
	.aboutBallList {
		padding: 0 30rpx;
	}

	.ballTop {
		background: $blueBg;
		border-radius: 16rpx 16rpx 0 0;
		padding: 24rpx 30rpx;
		color: #ffffff;
	}

	.ballBottom {
		padding: 30rpx;
		background-color: #ffffff;
	}

	.ballBottom image {
		width: 26rpx;
		height: 26rpx;
	}

	.longString {
		width: 4rpx;
		height: 24rpx;
		background-color: #999;
		margin: 0 10rpx;
	}

	/* 按钮样式 */
	.registered {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid $color;
		color: $color;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	.registeredEnd {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid #666666;
		color: #666666;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	.underway {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid $color;
		color: $color;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	.finished {
		width: 144rpx;
		text-align: center;
		padding: 12rpx 0;
		border: 1rpx solid #B2B2B2;
		color: #B2B2B2;
		font-size: 24rpx;
		border-radius: 26rpx;
		line-height: 26rpx;
	}

	/* 已报名/报名结束背景色 */
	.registeredEndColor {
		background: $phb;
	}

	/* 进行中背景色 */
	.underwayColor {
		background: $blueBg;
	}

	/* 已结束背景色 */
	.finishedColor {
		background: #CCCCCC;
	}

	.initiateBall {
		width: 88rpx;
		height: 88rpx;
		background: $phb;
		// box-shadow: 0rpx 4rpx 8rpx 0px rgba(221, 80, 64, 0.2), inset 0rpx 4rpx 16rpx 0px rgba(255, 255, 255, 0.28);
		border-radius: 50%;
		position: fixed;
		right: 40rpx;
		bottom: 184rpx;
	}

	.initiateBall image {
		width: 32rpx;
		height: 32rpx;
	}
</style>
